const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");

/*
  npm i webpack webpack-cli -D

  npm i vue-loader@15 vue-template-compiler -D

  npm i style-loader css-loader sass-loader sass -D

  npm i html-webpack-plugin -D

  npm i webpack-dev-server -D
*/

module.exports = {
  entry: "./src/main.js",
  output: {
    // path.resolve 返回值是一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"), // 输出目录
    filename: "js/[name].js", // 输出文件名
    clean: true, // 自动清除上次的打包内容
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.css$/,
        use: [
          // 将 JS 字符串生成为 style 节点
          "vue-style-loader",
          // 将 CSS 转化成 CommonJS 模块(css代码就变成js代码中一个模块)
          "css-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          // 将 JS 字符串生成为 style 节点
          "vue-style-loader",
          // 将 CSS 转化成 CommonJS 模块(css代码就变成js代码中一个模块)
          "css-loader",
          // 将 Sass 编译成 CSS
          "sass-loader",
        ],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  mode: "development",
  resolve: {
    // 自动补全文件扩展
    extensions: [".js", ".vue", ".json"],
  },
  devServer: {
    open: true,
    host: 'localhost',
    port: 9527,
    hot: true,
  },
};
